import React from "react";
import { Menu } from "antd";
import 'antd/dist/antd.css'
import './sass/index.scss'
import { Link } from 'react-router-dom'

export default class MenuPage extends React.Component {
  render() {
      const menu = [
          {
              id:0,
              title:'个性推荐',
              path:'/individuation'
          },
          {
            id:1,
            title:'歌单',
            path:'/songList'
        },
        {
            id:2,
            title:'排行榜',
            path:'/ranklist'
        },
        {
            id:3,
            title:'歌手',
            path:'/singer'
        },
        {
            id:4,
            title:'MV',
            path:'/mv'
        },
        {
            id:5,
            title:'最新音乐',
            path:'/newsong'
        },
      ]
    return (
        <Menu style={{ width: '20%',height:'100%',backgroundColor: '#f1f1f1' }} mode="inline">
          {
              menu.map((item,index)=>{
                  return(
                  <Menu.Item key={index}><Link to={item.path}>{item.title}</Link></Menu.Item>
                  )
              })
          }
        </Menu>
    );
  }
}
